<template>
    <!-- 访客统计 -->
    <div class="siderRight_visitor_census">
        <CustomGreenInitiativeCommonTotalNumber :totalList="data.totalList"></CustomGreenInitiativeCommonTotalNumber>
        <div class="visitor_statistics_echarts">
            <CommonTitleComponentTitleCategory text="近7天访客统计"></CommonTitleComponentTitleCategory>
            <div class="echarts">
                <chart-view
                    :chart-option="EchartsMethods.visitorStatistics()"
                    :auto-resize="true"
                    height="100%"
                ></chart-view>
            </div>
        </div>
        <div class="visitor_traffic_echarts">
            <CommonTitleComponentTitleCategory text="各卡口访客出入数量及占比"></CommonTitleComponentTitleCategory>
            <div class="visitor_traffic">
                <div class="echarts">
                    <chart-view
                        :chart-option="EchartsMethods.visitorTraffic()"
                        :auto-resize="true"
                        height="100%"
                    ></chart-view>
                </div>
                <div>
                    <CustomSecurityCommonBlockComponent
                        :list="blockList"
                        class="blockComponent"
                    ></CustomSecurityCommonBlockComponent>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { EchartsMethods } from '@/chart/index';
import { reactive, ref } from 'vue';
const data = reactive({
    totalList: {
        name: '今日访客总数',
        numList: 1000,
        unit: '人'
    }
});
const blockList = ref([
    {
        color: '#27B0F2',
        name: '道闸1',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#4871F3',
        name: '道闸2',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#E878FF',
        name: '道闸3',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#6EE6CB',
        name: '道闸4',
        val: 50,
        unit: '车次',
        rate: '30'
    },
    {
        color: '#E8D968',
        name: '道闸5',
        val: 50,
        unit: '车次',
        rate: '30'
    }
]);
</script>

<style scoped lang="scss">
.siderRight_visitor_census {
    height: 97%;
    padding-top: 10px;
    .visitor_statistics_echarts {
        padding-top: 15px;
        height: 46%;
        .echarts {
            height: 80%;
            padding-top: 10px;
            div {
                height: 100%;
            }
        }
    }
    .visitor_traffic_echarts {
        padding-top: 15px;
        height: 46%;
        .visitor_traffic {
            display: flex;
            align-items: center;
            height: 80%;
            .echarts {
                height: 100%;
                width: 40%;
                padding-top: 10px;
                div {
                    height: 100%;
                }
            }
            div {
                height: 100%;
                &:nth-of-type(2) {
                    width: 60%;
                    padding-top: 10px;
                    padding-left: 20px;
                    height: auto;
                }
            }
        }
    }
}
</style>
